<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>备孕伴程 - 产后抑郁预警</title>
        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
                background-color: #f8f9fa;
            }
            .iphone-frame {
                width: 390px;
                height: 844px;
                border-radius: 40px;
                overflow: hidden;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                margin: 20px auto;
                background-color: white;
                position: relative;
            }
            .status-bar {
                height: 44px;
                background-color: #f7fafc;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                font-size: 12px;
            }
            .bottom-nav {
                height: 70px;
                background-color: #ffffff;
                border-top: 1px solid #e2e8f0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: absolute;
                bottom: 0;
                width: 100%;
            }
            .tab-active {
                color: #ff6b8b;
            }
            .main-content {
                height: calc(100% - 114px); /* 全高减去状态栏和底部导航 */
                overflow-y: auto;
                padding-bottom: 16px;
            }
            /* 滚动条样式美化 */
            .main-content::-webkit-scrollbar {
                width: 4px;
            }
            .main-content::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
            .main-content::-webkit-scrollbar-thumb {
                background: #c5c5c5;
                border-radius: 2px;
            }
            /* 提示框样式 */
            .toast {
                position: fixed;
                bottom: 80px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.7);
                color: white;
                padding: 10px 20px;
                border-radius: 20px;
                font-size: 14px;
                z-index: 1000;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .toast.show {
                opacity: 1;
            }
            /* 选项卡样式 */
            .care-tabs {
                display: flex;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                position: relative;
                padding: 0 20px;
            }
            .care-tabs::-webkit-scrollbar {
                display: none;
            }
            .care-tab {
                flex: 0 0 auto;
                padding: 8px 16px;
                white-space: nowrap;
                transition: all 0.3s ease;
                border-bottom: 2px solid transparent;
            }
            .care-tab.active {
                color: #ff6b8b;
                border-bottom: 2px solid #ff6b8b;
                font-weight: 500;
            }
            /* 添加左右滑动指示器 */
            .tabs-scroll-indicator {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
                z-index: 5;
                cursor: pointer;
            }
            .tab-scroll-left {
                left: 0;
                display: none;
            }
            .tab-scroll-right {
                right: 0;
                transform: rotate(180deg);
                background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
            }
            /* 进度条样式 */
            .progress-bar {
                height: 6px;
                background-color: #e2e8f0;
                border-radius: 3px;
                overflow: hidden;
            }
            .progress-bar-inner {
                height: 100%;
                background-color: #ff6b8b;
                border-radius: 3px;
                transition: width 0.3s ease;
            }
            /* 问卷样式 */
            .question-card {
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
                transition: all 0.3s ease;
            }
            .question-card.active {
                box-shadow: 0 4px 12px rgba(255, 107, 139, 0.15);
            }
            /* 情绪日记样式 */
            .mood-tracker {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 8px;
            }
            .mood-day {
                aspect-ratio: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: #f3f4f6;
                border-radius: 8px;
                font-size: 12px;
            }
            .mood-icon {
                font-size: 16px;
                margin-bottom: 4px;
            }
            .mood-great { color: #10b981; }
            .mood-good { color: #60a5fa; }
            .mood-okay { color: #9ca3af; }
            .mood-sad { color: #f59e0b; }
            .mood-bad { color: #ef4444; }
        </style>
    </head>
    <body>
        <div class="iphone-frame">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <span><i class="fas fa-signal"></i> <i class="fas fa-wifi"></i> <i class="fas fa-battery-full"></i></span>
            </div>

            <!-- 主要内容区域 -->
            <div class="main-content" id="main-content">
                <!-- 页面标题 -->
                <div class="flex items-center px-4 py-3 bg-white shadow-sm sticky top-0 z-10">
                    <a href="javascript:history.back()" class="text-pink-500 mr-3">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <h1 class="text-lg font-medium">产后抑郁预警</h1>
                    <div class="ml-auto">
                        <button class="bg-pink-100 text-pink-500 rounded-full w-8 h-8 flex items-center justify-center">
                            <i class="fas fa-question"></i>
                        </button>
                    </div>
                </div>

                <!-- 页面内容区域 -->
                <div class="px-4 py-4">
                    <!-- 产后抑郁介绍 -->
                    <div class="bg-pink-50 rounded-xl shadow-sm p-4 mb-5">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0 mr-3">
                                <i class="fas fa-brain text-pink-600 text-xl"></i>
                            </div>
                            <div>
                                <h2 class="text-lg font-bold text-pink-900 mb-1">关于产后抑郁</h2>
                                <p class="text-sm text-pink-800">
                                    亲爱的妈妈，产后抑郁是一种常见的情绪健康问题，约10-15%的新妈妈会经历。请记住，这不代表您是不称职的妈妈，及早识别和积极应对是关键。我们将陪伴您度过这段时期。
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 情绪记录追踪 -->
                    <div class="mb-5">
                        <h3 class="font-bold text-base flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-2">
                                <i class="fas fa-chart-line text-pink-600"></i>
                            </div>
                            情绪记录追踪
                        </h3>

                        <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="font-medium">本周情绪变化</h4>
                                <span class="text-xs text-pink-500">查看更多记录</span>
                            </div>
                            
                            <div class="mood-tracker mb-4">
                                <div class="mood-day">
                                    <span class="mood-icon mood-good"><i class="fas fa-smile"></i></span>
                                    <span>一</span>
                                </div>
                                <div class="mood-day">
                                    <span class="mood-icon mood-great"><i class="fas fa-grin-beam"></i></span>
                                    <span>二</span>
                                </div>
                                <div class="mood-day">
                                    <span class="mood-icon mood-okay"><i class="fas fa-meh"></i></span>
                                    <span>三</span>
                                </div>
                                <div class="mood-day">
                                    <span class="mood-icon mood-sad"><i class="fas fa-frown"></i></span>
                                    <span>四</span>
                                </div>
                                <div class="mood-day">
                                    <span class="mood-icon mood-okay"><i class="fas fa-meh"></i></span>
                                    <span>五</span>
                                </div>
                                <div class="mood-day">
                                    <span class="mood-icon mood-good"><i class="fas fa-smile"></i></span>
                                    <span>六</span>
                                </div>
                                <div class="mood-day">
                                    <span class="mood-icon"><i class="fas fa-plus text-gray-400"></i></span>
                                    <span>日</span>
                                </div>
                            </div>

                            <button id="record-mood-btn" class="w-full py-3 bg-pink-500 text-white text-sm rounded-lg font-medium">
                                <i class="fas fa-plus-circle mr-1"></i> 记录今日情绪
                            </button>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                            <div class="flex justify-between items-center mb-3">
                                <h4 class="font-medium">情绪趋势分析</h4>
                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full">近30天</span>
                            </div>
                            
                            <div class="relative h-44 w-full mb-3 bg-gray-50 rounded-lg flex items-center justify-center">
                                <p class="text-gray-500 text-sm">情绪变化趋势图</p>
                                <!-- 此处在实际应用中应放置情绪变化图表 -->
                            </div>

                            <div class="flex space-x-3 text-center">
                                <div class="flex-1 py-2 border border-gray-100 rounded-lg">
                                    <p class="text-xs text-gray-500">平均情绪</p>
                                    <p class="text-base font-medium text-gray-700">良好</p>
                                </div>
                                <div class="flex-1 py-2 border border-gray-100 rounded-lg">
                                    <p class="text-xs text-gray-500">情绪波动</p>
                                    <p class="text-base font-medium text-gray-700">中等</p>
                                </div>
                                <div class="flex-1 py-2 border border-gray-100 rounded-lg">
                                    <p class="text-xs text-gray-500">低落天数</p>
                                    <p class="text-base font-medium text-gray-700">5天</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 爱丁堡产后抑郁量表 -->
                    <div class="mb-5">
                        <h3 class="font-bold text-base flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-2">
                                <i class="fas fa-clipboard-check text-pink-600"></i>
                            </div>
                            爱丁堡产后抑郁量表(EPDS)
                        </h3>

                        <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                            <div class="flex justify-between items-center mb-4">
                                <div>
                                    <h4 class="font-medium">自我评估</h4>
                                    <p class="text-xs text-gray-500 mt-1">国际通用的产后抑郁筛查工具</p>
                                </div>
                                <span class="text-xs bg-pink-100 text-pink-600 px-2 py-1 rounded-full">10个问题</span>
                            </div>
                            
                            <div class="bg-pink-50 rounded-lg p-3 mb-4">
                                <div class="flex items-start">
                                    <i class="fas fa-info-circle text-pink-600 mt-1 mr-2"></i>
                                    <div>
                                        <p class="text-sm text-pink-800">建议在安静环境中完成此评估。评估结果仅供参考，不能替代专业医生的诊断。</p>
                                    </div>
                                </div>
                            </div>

                            <div class="flex space-x-3 mb-3">
                                <div class="flex-1 text-center py-2 bg-green-100 rounded-lg text-sm text-green-800">
                                    <p class="font-medium">0-9分</p>
                                    <p class="text-xs mt-1">风险较低</p>
                                </div>
                                <div class="flex-1 text-center py-2 bg-yellow-100 rounded-lg text-sm text-yellow-800">
                                    <p class="font-medium">10-12分</p>
                                    <p class="text-xs mt-1">风险中等</p>
                                </div>
                                <div class="flex-1 text-center py-2 bg-red-100 rounded-lg text-sm text-red-800">
                                    <p class="font-medium">≥13分</p>
                                    <p class="text-xs mt-1">风险较高</p>
                                </div>
                            </div>

                            <button id="start-test-btn" class="w-full py-3 bg-pink-500 text-white text-sm rounded-lg font-medium">
                                <i class="fas fa-play-circle mr-1"></i> 开始自我评估
                            </button>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-4">
                            <div class="flex justify-between items-center mb-3">
                                <h4 class="font-medium">上次评估结果</h4>
                                <span class="text-xs text-gray-500">3天前</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                        <span class="text-xl font-bold text-green-600">6</span>
                                    </div>
                                    <div>
                                        <p class="font-medium text-green-600">低风险</p>
                                        <p class="text-xs text-gray-500 mt-1">您的情绪状况良好</p>
                                    </div>
                                </div>
                                <div class="flex flex-col space-y-2">
                                    <button class="text-xs text-pink-500 border border-pink-200 rounded-lg px-3 py-1.5">
                                        查看详情
                                    </button>
                                    <button class="text-xs text-gray-500 border border-gray-200 rounded-lg px-3 py-1.5" id="share-result-btn">
                                        <i class="fas fa-share-alt mr-1"></i> 分享给伴侣
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 产后抑郁信号识别 -->
                    <div class="mb-5">
                        <h3 class="font-bold text-base flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                            警示信号自我识别
                        </h3>

                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                            <div class="p-3 bg-red-50 border-b border-red-100">
                                <h4 class="font-medium text-red-800">需要关注的产后抑郁信号</h4>
                            </div>
                            <div class="p-4">
                                <div class="space-y-3 text-sm">
                                    <div class="flex items-start">
                                        <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-2 mt-0.5">
                                            <i class="fas fa-frown text-red-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">持续性情绪低落</p>
                                            <p class="text-gray-600">如果您连续两周以上感到悲伤、无望或异常焦虑</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-2 mt-0.5">
                                            <i class="fas fa-bed text-red-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">睡眠问题</p>
                                            <p class="text-gray-600">即使宝宝在睡觉，您也无法入睡，或者感到异常疲倦</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-2 mt-0.5">
                                            <i class="fas fa-utensils text-red-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">食欲变化</p>
                                            <p class="text-gray-600">食欲明显减退或增加，体重显著变化</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-2 mt-0.5">
                                            <i class="fas fa-baby text-red-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">对宝宝的异常感受</p>
                                            <p class="text-gray-600">对照顾宝宝感到极度恐惧或无法建立情感联系</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-2 mt-0.5">
                                            <i class="fas fa-dizzy text-red-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">难以集中注意力</p>
                                            <p class="text-gray-600">做决定困难，记忆力下降，无法集中精力</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mr-2 mt-0.5">
                                            <i class="fas fa-heart-broken text-red-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-800">自伤或悲观想法</p>
                                            <p class="text-gray-600">有伤害自己的想法或感到生活没有希望</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-4 bg-red-50 p-3 rounded-lg">
                                    <p class="text-red-800 text-sm font-medium flex items-center">
                                        <i class="fas fa-ambulance mr-2"></i>
                                        如果您有任何自伤想法或感到无法应对，请立即寻求专业帮助！
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 自我护理和应对策略 -->
                    <div class="mb-5">
                        <h3 class="font-bold text-base flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
                                <i class="fas fa-heart text-green-600"></i>
                            </div>
                            自我护理与应对
                        </h3>

                        <div class="space-y-3">
                            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                                <div class="p-4">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-hand-holding-heart text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">自我关爱</h4>
                                            <p class="text-sm text-gray-600">照顾好自己同样重要。尝试每天抽出一些时间做喜欢的事，哪怕只有几分钟。不要指望自己可以做到一切。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                                <div class="p-4">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-bed text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">保证休息</h4>
                                            <p class="text-sm text-gray-600">在宝宝睡觉时尽量休息。可以请伴侣、家人或朋友帮忙照顾宝宝，让自己有充分的休息时间。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                                <div class="p-4">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-comments text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">寻求支持</h4>
                                            <p class="text-sm text-gray-600">与伴侣、朋友或其他新妈妈交流您的感受。加入母亲互助小组，分享经验和情感。</p>
                                            <button class="mt-2 text-xs text-pink-500 border border-pink-200 rounded-lg px-3 py-1">
                                                <i class="fas fa-user-friends mr-1"></i> 查看互助小组
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                                <div class="p-4">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-walking text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">适当活动</h4>
                                            <p class="text-sm text-gray-600">轻度运动（如散步）可以改善情绪和睡眠质量。尝试带着宝宝一起出门，呼吸新鲜空气。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                                <div class="p-4">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mr-3">
                                            <i class="fas fa-user-md text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800 mb-1">专业帮助</h4>
                                            <p class="text-sm text-gray-600">如果感到情绪困扰，不要犹豫寻求专业帮助。治疗产后抑郁的常用方法包括心理咨询和必要时的药物治疗。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 与伴侣沟通 -->
                    <div class="mb-5">
                        <h3 class="font-bold text-base flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                <i class="fas fa-user-friends text-blue-600"></i>
                            </div>
                            与伴侣沟通
                        </h3>

                        <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                            <h4 class="font-medium mb-3">表达您的需求</h4>
                            <p class="text-sm text-gray-600 mb-3">
                                清晰地告诉伴侣您的感受和需要什么样的帮助。伴侣可能无法理解您的感受，但他们通常愿意提供支持。
                            </p>
                            <div class="bg-blue-50 rounded-lg p-3">
                                <div class="flex items-start">
                                    <i class="fas fa-info-circle text-blue-600 mt-1 mr-2"></i>
                                    <p class="text-sm text-blue-800">
                                        我们已为您的伴侣提供了产后抑郁的相关信息，帮助他们更好地理解和支持您。
                                    </p>
                                </div>
                            </div>
                            <button class="w-full mt-3 py-2 bg-blue-500 text-white text-sm rounded-lg font-medium" id="message-partner-btn">
                                <i class="fas fa-paper-plane mr-1"></i> 向伴侣发送需求
                            </button>
                        </div>
                    </div>

                    <!-- 紧急联系 -->
                    <div class="mb-10">
                        <div class="bg-red-600 rounded-xl shadow-md p-4 text-white">
                            <h3 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-phone-alt mr-2"></i>
                                紧急求助资源
                            </h3>
                            <div class="space-y-2 text-sm">
                                <div class="flex items-center justify-between py-2 border-b border-red-500">
                                    <span>产后抑郁干预专线</span>
                                    <a href="tel:400-888-9999" class="bg-white text-red-600 px-3 py-1 rounded-full font-medium">
                                        400-888-9999
                                    </a>
                                </div>
                                <div class="flex items-center justify-between py-2 border-b border-red-500">
                                    <span>心理健康热线</span>
                                    <a href="tel:400-161-9995" class="bg-white text-red-600 px-3 py-1 rounded-full font-medium">
                                        400-161-9995
                                    </a>
                                </div>
                                <div class="flex items-center justify-between py-2">
                                    <span>紧急医疗救助</span>
                                    <a href="tel:120" class="bg-white text-red-600 px-3 py-1 rounded-full font-medium">
                                        120
                                    </a>
                                </div>
                            </div>
                            
                            <button id="save-contacts-btn" class="w-full mt-3 py-2 bg-white text-red-600 text-sm rounded-lg font-medium">
                                <i class="fas fa-save mr-1"></i> 保存联系人到手机
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="bottom-nav">
                <a href="home.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-calendar-alt text-xl"></i>
                    <span class="text-xs mt-1">记录</span>
                </a>
                <a href="#" class="flex flex-col items-center tab-active">
                    <i class="fas fa-heartbeat text-xl"></i>
                    <span class="text-xs mt-1">健康</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>

            <!-- 提示框 -->
            <div class="toast" id="toast"></div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 显示提示信息的函数
                function showToast(message) {
                    const toast = document.getElementById('toast');
                    toast.textContent = message;
                    toast.classList.add('show');

                    setTimeout(() => {
                        toast.classList.remove('show');
                    }, 2000);
                }

                // 记录情绪按钮
                const recordMoodBtn = document.getElementById('record-mood-btn');
                if (recordMoodBtn) {
                    recordMoodBtn.addEventListener('click', function() {
                        showMoodSelectionModal();
                    });
                }

                // 开始评估测试按钮
                const startTestBtn = document.getElementById('start-test-btn');
                if (startTestBtn) {
                    startTestBtn.addEventListener('click', function() {
                        showToast('正在准备爱丁堡产后抑郁量表评估...');
                        // 模拟跳转到测试页面
                        setTimeout(() => {
                            showStartTestModal();
                        }, 500);
                    });
                }

                // 分享给伴侣按钮
                const shareResultBtn = document.getElementById('share-result-btn');
                if (shareResultBtn) {
                    shareResultBtn.addEventListener('click', function() {
                        showToast('已将评估结果分享给您的伴侣');
                    });
                }

                // 向伴侣发送需求按钮
                const messagePartnerBtn = document.getElementById('message-partner-btn');
                if (messagePartnerBtn) {
                    messagePartnerBtn.addEventListener('click', function() {
                        showNeedsModal();
                    });
                }

                // 保存联系人按钮
                const saveContactsBtn = document.getElementById('save-contacts-btn');
                if (saveContactsBtn) {
                    saveContactsBtn.addEventListener('click', function() {
                        showToast('已保存紧急联系人至手机通讯录');
                    });
                }

                // 创建并显示情绪选择模态框
                function showMoodSelectionModal() {
                    // 创建模态框
                    const modal = document.createElement('div');
                    modal.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50';
                    modal.id = 'mood-modal';
                    
                    // 模态框内容
                    modal.innerHTML = `
                        <div class="bg-white rounded-xl w-4/5 max-w-md p-5 relative">
                            <button id="close-modal" class="absolute top-3 right-3 text-gray-400">
                                <i class="fas fa-times"></i>
                            </button>
                            <div class="text-center mb-5">
                                <h3 class="font-bold text-lg">今日情绪记录</h3>
                                <p class="text-sm text-gray-600 mt-1">选择最能代表您今天整体情绪的选项</p>
                            </div>
                            <div class="grid grid-cols-5 gap-2 mb-5">
                                <div class="mood-option flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-pink-50">
                                    <span class="text-2xl mood-great"><i class="fas fa-grin-beam"></i></span>
                                    <span class="text-xs mt-1">很好</span>
                                </div>
                                <div class="mood-option flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-pink-50">
                                    <span class="text-2xl mood-good"><i class="fas fa-smile"></i></span>
                                    <span class="text-xs mt-1">良好</span>
                                </div>
                                <div class="mood-option flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-pink-50">
                                    <span class="text-2xl mood-okay"><i class="fas fa-meh"></i></span>
                                    <span class="text-xs mt-1">一般</span>
                                </div>
                                <div class="mood-option flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-pink-50">
                                    <span class="text-2xl mood-sad"><i class="fas fa-frown"></i></span>
                                    <span class="text-xs mt-1">低落</span>
                                </div>
                                <div class="mood-option flex flex-col items-center p-2 rounded-lg cursor-pointer hover:bg-pink-50">
                                    <span class="text-2xl mood-bad"><i class="fas fa-sad-tear"></i></span>
                                    <span class="text-xs mt-1">很差</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">记录一下今天的感受（可选）</label>
                                <textarea class="w-full border border-gray-200 rounded-lg p-2 text-sm" rows="3" placeholder="今天我感觉..."></textarea>
                            </div>
                            <button id="save-mood-btn" class="w-full py-3 bg-pink-500 text-white rounded-lg font-medium">
                                保存记录
                            </button>
                        </div>
                    `;
                    
                    // 添加到页面
                    document.body.appendChild(modal);
                    
                    // 关闭模态框
                    document.getElementById('close-modal').addEventListener('click', function() {
                        document.body.removeChild(modal);
                    });
                    
                    // 保存情绪记录
                    document.getElementById('save-mood-btn').addEventListener('click', function() {
                        document.body.removeChild(modal);
                        showToast('情绪记录已保存');
                        
                        // 模拟更新情绪记录UI
                        const todayMood = document.querySelector('.mood-tracker .mood-day:last-child span.mood-icon');
                        if (todayMood) {
                            todayMood.className = 'mood-icon mood-good';
                            todayMood.innerHTML = '<i class="fas fa-smile"></i>';
                        }
                    });
                    
                    // 选择情绪
                    const moodOptions = modal.querySelectorAll('.mood-option');
                    moodOptions.forEach(option => {
                        option.addEventListener('click', function() {
                            moodOptions.forEach(opt => opt.classList.remove('bg-pink-50'));
                            this.classList.add('bg-pink-50');
                        });
                    });
                }

                // 创建并显示测试开始模态框
                function showStartTestModal() {
                    // 创建模态框
                    const modal = document.createElement('div');
                    modal.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50';
                    modal.id = 'test-modal';
                    
                    // 模态框内容
                    modal.innerHTML = `
                        <div class="bg-white rounded-xl w-4/5 max-w-md p-5 relative">
                            <button id="close-modal" class="absolute top-3 right-3 text-gray-400">
                                <i class="fas fa-times"></i>
                            </button>
                            <div class="text-center mb-4">
                                <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-3">
                                    <i class="fas fa-clipboard-check text-pink-600 text-xl"></i>
                                </div>
                                <h3 class="font-bold text-lg">爱丁堡产后抑郁量表</h3>
                                <p class="text-sm text-gray-600 mt-1">本测试将帮助您评估产后情绪健康状况</p>
                            </div>
                            <div class="bg-yellow-50 p-3 rounded-lg text-sm text-yellow-800 mb-4">
                                <p><i class="fas fa-info-circle mr-1"></i> 完成测试需要3-5分钟，请选择安静环境进行</p>
                            </div>
                            <button id="start-now-btn" class="w-full py-3 bg-pink-500 text-white rounded-lg font-medium">
                                立即开始
                            </button>
                            <button id="remind-later-btn" class="w-full py-3 mt-2 border border-gray-200 text-gray-600 rounded-lg">
                                稍后提醒
                            </button>
                        </div>
                    `;
                    
                    // 添加到页面
                    document.body.appendChild(modal);
                    
                    // 关闭模态框
                    document.getElementById('close-modal').addEventListener('click', function() {
                        document.body.removeChild(modal);
                    });
                    
                    // 立即开始按钮
                    document.getElementById('start-now-btn').addEventListener('click', function() {
                        document.body.removeChild(modal);
                        showToast('开始评估问卷...');
                    });
                    
                    // 稍后提醒按钮
                    document.getElementById('remind-later-btn').addEventListener('click', function() {
                        document.body.removeChild(modal);
                        showToast('已设置稍后提醒');
                    });
                }

                // 创建并显示向伴侣发送需求的模态框
                function showNeedsModal() {
                    // 创建模态框
                    const modal = document.createElement('div');
                    modal.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50';
                    modal.id = 'needs-modal';
                    
                    // 模态框内容
                    modal.innerHTML = `
                        <div class="bg-white rounded-xl w-4/5 max-w-md p-5 relative">
                            <button id="close-modal" class="absolute top-3 right-3 text-gray-400">
                                <i class="fas fa-times"></i>
                            </button>
                            <div class="mb-4">
                                <h3 class="font-bold text-lg mb-2">向伴侣表达您的需求</h3>
                                <p class="text-sm text-gray-600">选择您当前最需要的支持类型</p>
                            </div>
                            <div class="space-y-2 mb-4">
                                <div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer need-option">
                                    <input type="checkbox" class="mr-3 w-5 h-5 text-pink-500">
                                    <span>需要休息时间</span>
                                </div>
                                <div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer need-option">
                                    <input type="checkbox" class="mr-3 w-5 h-5 text-pink-500">
                                    <span>帮忙照顾宝宝</span>
                                </div>
                                <div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer need-option">
                                    <input type="checkbox" class="mr-3 w-5 h-5 text-pink-500">
                                    <span>分担家务</span>
                                </div>
                                <div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer need-option">
                                    <input type="checkbox" class="mr-3 w-5 h-5 text-pink-500">
                                    <span>情感支持与倾听</span>
                                </div>
                                <div class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer need-option">
                                    <input type="checkbox" class="mr-3 w-5 h-5 text-pink-500">
                                    <span>陪伴就医</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">添加详细说明（可选）</label>
                                <textarea class="w-full border border-gray-200 rounded-lg p-2 text-sm" rows="2" placeholder="我希望你能..."></textarea>
                            </div>
                            <button id="send-needs-btn" class="w-full py-3 bg-blue-500 text-white rounded-lg font-medium">
                                发送给伴侣
                            </button>
                        </div>
                    `;
                    
                    // 添加到页面
                    document.body.appendChild(modal);
                    
                    // 关闭模态框
                    document.getElementById('close-modal').addEventListener('click', function() {
                        document.body.removeChild(modal);
                    });
                    
                    // 选择需求选项
                    const needOptions = modal.querySelectorAll('.need-option');
                    needOptions.forEach(option => {
                        option.addEventListener('click', function() {
                            const checkbox = this.querySelector('input[type="checkbox"]');
                            checkbox.checked = !checkbox.checked;
                        });
                    });
                    
                    // 发送需求
                    document.getElementById('send-needs-btn').addEventListener('click', function() {
                        document.body.removeChild(modal);
                        showToast('已将您的需求发送给伴侣');
                    });
                }

                // 设置时间显示
                const statusTime = document.getElementById('status-time');
                if (statusTime) {
                    const updateTime = () => {
                        const now = new Date();
                        const hours = now.getHours().toString().padStart(2, '0');
                        const minutes = now.getMinutes().toString().padStart(2, '0');
                        statusTime.textContent = `${hours}:${minutes}`;
                    };
                    
                    updateTime();
                    setInterval(updateTime, 60000);
                }
            });
        </script>
    </body>
</html>
